import React, {useEffect, useState} from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { Layout } from 'antd';

import Scrollbars from '@iso/components/utility/customScrollBar';

import appActions from '@iso/redux/app/actions';
import Logo from '@iso/components/utility/logo';
import SidebarWrapper from './Sidebar.styles';
import axios from "../../http";
import SideBarNavigationMenu from "./SideBarNavigationMenu";

const {Sider} = Layout;

const { toggleOpenDrawer, changeOpenKeys, changeCurrent, toggleCollapsed } =
	appActions;

export default function Sidebar() {

	const [data,setData]=useState(null)

	const processData = (data) => {
		let list=data.data

		list=convertData(list,0);

		setData(list);

	}

	const  convertData=(list,parentId)=>{
		let retList=[];
		for(let i=0;i<list.length;i++){
			let t=list[i];
			let treeNodeData={}
			treeNodeData['title']=t.nameZh;
			treeNodeData['key']=t.id;
			treeNodeData['parentId']=t.pId;
			treeNodeData['code']=t.nameEn;
			if(t.pId==parentId){
				let children=convertData(list,t.id);
				treeNodeData["children"]=children;
				retList.push(treeNodeData);
			}
		}
		return retList;
	}

	const loadData=(processData) =>{

		axios.post('api/core/access/resources/getUserMenuZtreeJson',{headers: {'Content-Type': 'application/x-www-form-urlencoded'}})
			.then((response)=>{
				let  data=response.data
				processData(data)
			})
			.catch(function (error) {
				console.log(error);
			});

	}
	// this method is the same as componentDidMount method in class  component
	useEffect(()=>{
		loadData(processData)
	},[])



	const dispatch = useDispatch();
	const { view, openKeys, collapsed, openDrawer, current, height } =
		useSelector((state) => state.App);
	const customizedTheme = useSelector(
		(state) => state.ThemeSwitcher.sidebarTheme
	);

	function handleClick(e) {
		dispatch(changeCurrent([e.key]));
		if (view === 'MobileView') {
			setTimeout(() => {
				dispatch(toggleCollapsed());
				// dispatch(toggleOpenDrawer());
			}, 100);

			// clearTimeout(timer);
		}
	}
	function onOpenChange(newOpenKeys) {
		const latestOpenKey = newOpenKeys.find(
			(key) => !(openKeys.indexOf(key) > -1)
		);
		const latestCloseKey = openKeys.find(
			(key) => !(newOpenKeys.indexOf(key) > -1)
		);
		let nextOpenKeys = [];
		if (latestOpenKey) {
			nextOpenKeys = getAncestorKeys(latestOpenKey).concat(latestOpenKey);
		}
		if (latestCloseKey) {
			nextOpenKeys = getAncestorKeys(latestCloseKey);
		}
		dispatch(changeOpenKeys(nextOpenKeys));
	}
	const getAncestorKeys = (key) => {
		const map = {
			sub3: ['sub2'],
		};
		return map[key] || [];
	};

	const isCollapsed = collapsed && !openDrawer;
	const mode = isCollapsed === true ? 'vertical' : 'inline';
	const onMouseEnter = (event) => {
		if (collapsed && openDrawer === false) {
			dispatch(toggleOpenDrawer());
		}
		return;
	};
	const onMouseLeave = () => {
		if (collapsed && openDrawer === true) {
			dispatch(toggleOpenDrawer());
		}
		return;
	};
	const styling = {
		backgroundColor: customizedTheme.backgroundColor,
	};
	const submenuStyle = {
		backgroundColor: 'rgba(0,0,0,0.3)',
		color: customizedTheme.textColor,
	};
	const submenuColor = {
		color: customizedTheme.textColor,
	};


	return (
		<SidebarWrapper>
			<Sider
				trigger={null}
				collapsible={true}
				collapsed={isCollapsed}
				width={240}
				className='isomorphicSidebar'
				onMouseEnter={onMouseEnter}
				onMouseLeave={onMouseLeave}
				style={styling}
			>
				<Logo collapsed={isCollapsed} />
				<Scrollbars style={{ height: height - 70 }}>
					<SideBarNavigationMenu data={data}/>
				</Scrollbars>
			</Sider>
		</SidebarWrapper>
	);
}
